<template>
    <div>
        <el-dialog
            :title="$t('site.siteAdd.title')"
            :visible="visibleAdd2"
            width="1200px"
            @opened="openDialog"
            @close="()=>{$store.commit('setVisibleAdd2',false)}">
            <el-row :gutter="24">
                <el-col :span="9">
                    <el-form ref="form" :model="form" label-width="180px" >
                        <el-form-item :label="$t('site.siteName')" prop="siteName" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_siteName,trigger:'blur'}]">
                            <el-input v-model="form.siteName" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('site.siteOwn')" prop="siteOwn" :rules="[{ required: true, message: $t('index_js_notNull')}]" v-if="userType!=5&&userType!=6">
                            <el-select
                                v-model="form.siteOwn"
                                clearable
                                filterable
                                remote
                                reserve-keyword
                                :placeholder="$t('pleaseSelect')+'关键字'"
                                :remote-method="remoteMethod"
                                :loading="loading"
                                @change="changeUser(form.siteOwn)">
                                <el-option
                                    v-for="item in selectSiteOwnData"
                                    :key="item.ids"
                                    :label="item.loginName"
                                    :value="item.ids">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('country')" prop="nation" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.nation" filterable :placeholder="$t('pleaseSelect')" @change='changeData(2,form.nation)'>
                                <el-option
                                v-for="item in selectCountryData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('timeZone')" prop="timeZone" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.timeZone" filterable :placeholder="$t('pleaseSelect')" @change="changeTimezone">
                                <el-option
                                v-for="item in selectTimezoneData"
                                :key="item.timeZoneValue"
                                :label="item.timeZone"
                                :value="item.timeZoneValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('login.wifiSN')" prop="wifiSN" :rules="[{ required: true, message: $t('index_js_notNull')},{ validator:test_wifiSN, trigger:'blur'}]">
                            <el-input v-big v-model="form.wifiSN" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('package.card')" prop="packages" v-show="selectPackagesData.length>0">
                            <el-select v-model="form.packageId" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in selectPackagesData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('site.capacity')" prop="capacity" :rules="[{ required: true, message: $t('index_js_notNull')},{validator:test_capacity,trigger:'blur'}]">
                            <el-input v-model="form.capacity" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('postcode')" prop="postcode">
                            <el-input v-model="form.postcode" placeholder="" @blur="changePostcode"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('province')" prop="province" :rules="[{ required: isChina, message: $t('pleaseSelect')},{validator:test_zero,trigger:'change'}]" v-show="isChina">
                            <el-select v-model="form.province" filterable :placeholder="$t('pleaseSelect')" @change='changeData(3,form.province)'>
                                <el-option
                                v-for="item in selectProvinceData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('city')" prop="city" :rules="[{ required: isChina, message: $t('pleaseSelect')},{validator:test_zero,trigger:'change'}]" v-show="isChina">
                            <el-select v-model="form.city" filterable :placeholder="$t('pleaseSelect')" @change='changeData(4,form.city)'>
                                <el-option
                                v-for="item in selectCityData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('county')" prop="county" :rules="[{ required: isChina, message: $t('pleaseSelect')},{validator:test_zero,trigger:'change'}]" v-show="isChina">
                            <el-select v-model="form.county" filterable :placeholder="$t('pleaseSelect')" @change='changeData(5,form.county)'>
                                <el-option
                                v-for="item in selectCountyData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('town')" prop="town" :rules="[{ required: isChina, message: $t('pleaseSelect')},{validator:test_zero,trigger:'change'}]" v-show="isChina">
                            <el-select v-model="form.town" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in selectTownData"
                                :key="item.enName"
                                :label="item.enName"
                                :value="item.enName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('province')" v-show="!isChina">
                            <el-input v-model="form.province" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('city')" v-show="!isChina">
                            <el-input v-model="form.city" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('county')" v-show="!isChina">
                            <el-input v-model="form.county" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('town')" v-show="!isChina">
                            <el-input v-model="form.town" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('address')">
                            <el-input v-model="form.address" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('introduce')">
                            <el-input v-model="form.instroduce" type="textarea" placeholder=""></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="ifSummerTime&&checkVisible?8:15" ref="mapWrap" id="mapWrap">
                    <el-checkbox v-model="ifSummerTime" v-show="checkVisible">{{$t('index.summerTimmer')}}</el-checkbox>
                    <div id="allmap" ref="allmap" :style="{width:mapData.width,height:mapData.height,cursor:mapData.crosshairFlag?'crosshair':''}"></div>
                    <div class="map-tool" id="mapTool" ref="mapTool">
                        <span :class="[{active:mapToolType=='marker'}]" :title="$t('map.markerSite')" @click="mapTool('marker')"><i class="iconfont icon-marker-site"></i></span>
                        <span :class="[{active:mapToolType=='remove'}]" :title="$t('map.removeSite')" @click="mapTool('remove')"><i class="iconfont icon-remove-site"></i></span>
                        <span :class="[{active:mapToolType=='save'}]" title="保存电站" @click="mapTool('save')"><i class="iconfont icon-save-site"></i></span>
                    </div>
                </el-col>
                <el-col :span="7" v-if="ifSummerTime&&checkVisible">
                    <!--夏令时按星期-->
                    <span class="label-inline">{{$t('index.type')}}</span>
                    <el-select v-model="summerType" filterable :placeholder="$t('pleaseSelect')" @change="changeSummerType">
                        <el-option v-for="item in summerTimeData.SUMMER_TYPE" :key="item.value" :label="item.code" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-form class="form" ref="summer_form1" :model="summer_form1" label-width="10" v-if="summerType=='1'">
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.startTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerMonth" filterable :placeholder="$t('month')">
                                        <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerSort" filterable :placeholder="$t('site.sort')">
                                        <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item prop="start_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerNum" filterable :placeholder="$t('site.week_num')">
                                        <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.start_summerWeek" filterable :placeholder="$t('week')">
                                        <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                             <el-col :span="24">
                                 <el-form-item prop="start_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker
                                        v-model="summer_form1.start_summer_hour"
                                        format="HH:mm"
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                 </el-form-item>
                             </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.endTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerMonth" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerMonth" filterable :placeholder="$t('month')">
                                        <el-option v-for="item in summerTimeData.MONTH" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerSort" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerSort" filterable :placeholder="$t('site.sort')">
                                        <el-option v-for="item in summerTimeData.SORT_TYPE" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item prop="end_summerNum" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerNum" filterable :placeholder="$t('site.week_num')">
                                        <el-option v-for="item in summerTimeData.NOWEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_summerWeek" :rules="[{ required: true, message: $t('pleaseSelect')}]">
                                    <el-select v-model="summer_form1.end_summerWeek" filterable :placeholder="$t('week')">
                                        <el-option v-for="item in summerTimeData.WEEK" :key="item.value" :label="item.code" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                             <el-col :span="24">
                                <el-form-item prop="end_summer_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form1.end_summer_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm" 
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                             </el-col>
                        </el-row>
                    </el-form>
                    <!--夏令时按日期-->
                    <el-form class="form" ref="summer_form2" :model="summer_form2" label-width="0" v-if="summerType=='2'">
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.startTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-date-picker 
                                        v-model="summer_form2.start_month" 
                                        type="date" 
                                        format="MM-dd"
                                        value-format="MM-dd"
                                        placeholder="01-01">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="start_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form2.start_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24" class="label">
                                <span>{{$t('index.endTime')}}</span>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_month" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-date-picker 
                                        v-model="summer_form2.end_month" 
                                        format="MM-dd"
                                        value-format="MM-dd"
                                        placeholder="01-01">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="end_hour" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                    <el-time-picker 
                                        v-model="summer_form2.end_hour" 
                                        format="HH:mm" 
                                        value-format="HH:mm"
                                        placeholder="00:00">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>
            <el-row>
                <el-checkbox v-model="authorizeFlag">{{$t('site.js_isnot_authorize')}}</el-checkbox>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleAdd2',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')" :loading="submitFlag">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:{
        mapData:{
            default:() => {return {}}
        }
    },
    data() {
        this.test_siteName = async(rule, value, callback) => {
            if(value.indexOf('"')>=0||value.indexOf("'")>=0){
                callback(new Error(this.$t('site.addSite.siteNameMsg')));
            }else{
                callback();
            }
        }
        this.test_wifiSN = async(rule, value, callback) => {
            let _userId = this.userType==5 ? this.userId : this.form.siteOwn
            let res = await this.API.checkWifiSNByUser({wifiSn:this.form.wifiSN,userIds:_userId})
            if (res == '2') {
                callback(new Error(this.$t('login.js_sign_wifisn_error')));
            }else if (res == '3') {
                callback(new Error(this.$t('login.js_sign_wifisn_registered')));
            }else{
                callback();
            }
        }
        this.test_capacity = async(rule, value, callback) => {
            if(!this.Regs.num_reg.test(value)){
                callback(new Error(this.$t('site.js_capacity_rule')));
            }else{
                callback();
            }
        }
        this.test_zero = async(rule, value, callback) => {
            if(value==='请选择'){
                callback(new Error(this.$t('pleaseSelect')));
            }else{
                callback();
            }
        }
        return {
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            userId:JSON.parse(sessionStorage.getItem('userObj')).ids,
            submitFlag:false,
            form:{
                siteName:'',
                siteOwn:'',
                nation:'',
                timeZone:'',
                wifiSN:'',
                packageId:'',
                capacity:'',
                postcode:'',
                province:'',
                city:'',
                county:'',
                town:'',
                address:'',
                introduce:'',
                longitude:'',
                latitude:'',
                updateTime:''
            },
            mapToolType:'',
            loading:false,
            selectCountryData:[],
            selectSiteOwnData:[],
            selectTimezoneData:[],
            selectPackagesData:[],
            selectProvinceData:[],
            summerTimeData:{
                SUMMER_TYPE:[],
                MONTH:[],
                SORT_TYPE:[],
                WEEK:[],
                NOWEEK:[],
            },//夏令时
            selectCityData:[],
            selectCountyData:[],
            selectTownData:[],
            summer_form1:{
                start_summerMonth:'',
                start_summerSort:'',
                start_summerNum:'',
                start_summerWeek:'',
                start_summer_hour:'00:00',
                end_summerMonth:'',
                end_summerSort:'',
                end_summerNum:'',
                end_summerWeek:'',
                end_summer_hour:'00:00',
            },
            summer_form2:{
                start_month:'',
                start_hour:'00:00',
                end_month:'',
                end_hour:'00:00'
            },
            summerType:'1',
            authorizeFlag:false,
            isChina:false,
            checkVisible:false,
            ifSummerTime:false,
            test_siteName:{},
            test_wifiSN:{},
            test_capacity:{},
            test_zero:{}

        };
    },
    computed: {
        visibleAdd2(){
            return this.$store.state.sysStore.visibleAdd2
        }
    },
    mounted(){
        this.selectCountry()
        this.selectTimezone()
        this.getDictionaryBatch()
        if(this.userType==5||this.userType==6){
            this.getWifiSnByUserId()
            this.getUserDetails()
        }
    },
    methods: {
        openDialog(){
            console.log('打开')
            this.form.longitude=''
            this.form.latitude=''
            this.form.address=''
        },
        handler({BMap,map}){
            this.mapData.mapObj=map;
        },
        mapTool(type){
            this.mapToolType=type
            if(type=='marker'){
                console.log(this.mapData.mapObj.event)
                if(this.mapData.mapObj.event){
                    google.maps.event.removeListener(this.mapData.mapObj,'click',this.addMarker,false)
                }
                if(this.mapData.markers.length>0){
                    this.$message.warning(this.$t('map.existSite'))
                    return false;
                }else{
                    // this.mapData.mapObj.setDefaultCursor("crosshair");
                    google.maps.event.addListener(this.mapData.mapObj,'click',this.addMarker,false)
                }
            }else if(type=='remove'){
                console.log(this.mapData.markers)
                if(this.mapData.markers.length>0){
                    this.mapData.markers[0].setMap(null);
                    // google.maps.event.removeListener(this.mapData.mapObj,'click',this.addMarker,false)
                    this.mapData.markers=[]
                    this.form.longitude=''
                    this.form.latitude=''
                    this.form.address=''
                }else{
                    this.$message.warning(this.$t('map.removePower'));
                }
            }else if(type=='save'){
                // if(google.maps.event){
                //     google.maps.event.removeListener(this.mapData.mapObj,'click',this.addMarker,false)
                // }
                if(this.mapData.markers.length==0){
                    this.$message.warning(this.$t('map_validateLatLng'))
                    return false;
                }else{
                    this.saveMarker();
                    // var positionInfo=this.mapData.markers[0].getPosition();
                    // var thisObj=this;
                    // var geocoder = new BMap.Geocoder();
                    // geocoder.getLocation(positionInfo, function(result){
                    //     if(result){
                    //         thisObj.form.address=result.address;
                    //     }
                    // })
                }
            }
        },
        addMarker(event){
            if(this.mapData.markers==0 && this.mapToolType=='marker'){
                this.mapData.crosshairFlag=true
                var point = event.latLng;
                var marker = new google.maps.Marker({
                    position:point,
                    draggable:true,
                    map:this.mapData.mapObj
                    });// 创建标注
                this.mapData.markers.push(marker);
                console.log(marker)
                this.mapData.crosshairFlag=false
                if(this.mapData.mapObj.event){
                    this.mapData.mapObj.event.removeListener(this.mapData.mapObj,'click',this.addMarker);
                }
            }else{
                if(this.mapData.mapObj.event){
                    this.mapData.mapObj.event.removeListener(this.mapData.mapObj,'click',this.addMarker);
                }
            }
        },
        saveMarker(){
            var positionInfo=this.mapData.markers[0].position;
      
            this.form.longitude = this.mapData.markers[0].position.lng()
            this.form.latitude = this.mapData.markers[0].position.lat()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'CHINA_DES,SUMMER_TYPE,MONTH,SORT_TYPE,WEEK,NOWEEK',
                lang:localStorage.getItem('lang')
            })
            this.summerTimeData=res
        },
        async selectCountry(){
            let res = await this.API.selectCountry()
            this.selectCountryData = res || []
        },
        async selectTimezone(){
            let res = await this.API.getTimeZoneList()
            this.selectTimezoneData = res || []
        },
        async selectPackage(){
            let res = await this.API.getPackageByCountry({countryName:this.country})
            this.selectPackagesData = res || []
        },
        async changeData(level,name){
            console.log(level+' '+name)
            if(level=='2'){
                this.selectPackage()
            }
            if(this.form.nation=='中国'){
                this.isChina=true
                let res = await this.API.selectNextAreaByName({
                    name:encodeURI(name),
                    areaLevel:level
                })
                if(level=='2'){
                    this.form.province = ''
                    this.form.city = ''
                    this.form.county = ''
                    this.form.town = ''
                    this.selectProvinceData = res || []
                }else if(level=='3'){
                    this.form.city = ''
                    this.form.county = ''
                    this.form.town = ''
                    this.selectCityData = res || []
                }else if(level=='4'){
                    this.form.county = ''
                    this.form.town = ''
                    this.selectCountyData = res || []
                }else if(level=='5'){
                    this.form.town = ''
                    this.selectTownData = res
                }
            }else{
                this.isChina=false
                this.form.province = ''
                this.form.city = ''
                this.form.county = ''
                this.form.town = ''
            }
        },
        async remoteMethod(query){
            if(query!=''){
                this.loading = true;
                let res = await this.API.getUserListBySite({loginName:query})
                this.loading = false;
                this.selectSiteOwnData=res || []
            }else{
                this.selectSiteOwnData=[]
            }
        },
        changeUser(own_userId){
            this.getWifiSnByUserId(own_userId)
            this.selectSiteOwnData.forEach(item => {
                if(own_userId == item.ids){
                    if(item.country){
                        this.form.nation=item.country 
                        this.changeData(2,this.form.nation)
                    }
                }
            });
        },
        async changePostcode(){
            // let postcode=this.form.postcode
            // if(postcode!=''){
            //     let res = await this.API.getJWDByZipCode({zipCode:this.form.postcode})
            //     console.log(res)
            // }
        },
        async changeTimezone(val){
            let res = await this.API.getSummerTime({timeZoneValue:val})
            if(res.summerStartTime!=null && res.summerStartTime.indexOf(';')!=-1 && res.summerEndTime!=null && res.summerEndTime.indexOf(';')!=-1){
                // this.ifSummerTime=true
                var startArray=res.summerStartTime.split(';')
                var endArray=res.summerEndTime.split(';')
                if(startArray.length>2 && endArray.length>2){//按星期
                    this.summerType='1'
                    this.summer_form1={
                        start_summerMonth: startArray[0],
                        start_summerSort: startArray[1]>0?'1':'2',
                        start_summerNum: Math.abs(startArray[1]),
                        start_summerWeek: startArray[2],
                        start_summer_hour: startArray[3],
                        end_summerMonth: endArray[0],
                        end_summerSort: endArray[1]>0?'1':'2',
                        end_summerNum: Math.abs(endArray[1]),
                        end_summerWeek: endArray[2],
                        end_summer_hour: endArray[3],
                    }
                    this.ifSummerTime=true
                }
                this.checkVisible=false
            }else{
                this.checkVisible=true
                this.ifSummerTime=false
                for(let item in this.summer_form1){
                    this.summer_form1[item]=item=='start_summer_hour'||item=='end_summer_hour'?'00:00':''
                }
            }
        },
        changeSummerType(val){
            if(val=='1') this.$refs['summer_form2'].resetFields();
            if(val=='2') this.$refs['summer_form1'].resetFields();
        },
        async getUserDetails(){
            let res = await this.API.getUserDetails({userId:this.userId})
            this.form.nation=res.country
        },
        async getWifiSnByUserId(userId){
            let res = await this.API.getWifiSnByUserId({userId:userId})
            if(res && res.length>0){
                this.form.wifiSN=res[0].wifiSN
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
                let vali_flag=true
                if(this.ifSummerTime){
                    if(this.summerType=='1'){
                        this.$refs['summer_form1'].validate((valid2) => {
                            if(valid2){
                                let sort_start=this.summer_form1.start_summerSort==1?'':'-'
                                this.form.summerStartTime=this.summer_form1.start_summerMonth+';'+sort_start+this.summer_form1.start_summerNum+';'+this.summer_form1.start_summerWeek+';'+this.summer_form1.start_summer_hour
                                let sort_end=this.summer_form1.end_summerSort==1?'':'-'
                                this.form.summerEndTime=this.summer_form1.end_summerMonth+';'+sort_end+this.summer_form1.end_summerNum+';'+this.summer_form1.end_summerWeek+';'+this.summer_form1.end_summer_hour
                            }else{
                                vali_flag=valid2
                                return false
                            }
                        })
                    }else if(this.summerType=='2'){
                        this.$refs['summer_form2'].validate((valid2) => {
                            if(valid2){
                                this.form.summerStartTime=this.summer_form2.start_month+' '+this.summer_form2.start_hour
                                this.form.summerEndTime=this.summer_form2.end_month+' '+this.summer_form2.end_hour
                            }else{
                                vali_flag=valid2
                                return false
                            }
                        })
                    }
                    console.log(this.form.summerStartTime+'end:'+this.form.summerEndTime)
                }
                if(valid&&vali_flag) {
                    console.log(valid)
                    if(this.form.latitude==''||this.form.longitude==''){
                        if(this.mapData.markers.length>0){
                            this.saveMarker()
                            this.commitForm()
                        }else{
                            this.$message.error(this.$t('map_validateLatLng'));
                        }
                    }else{
                        this.commitForm()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async commitForm(){
            this.$set(this.form,'latitude','G'+this.form.latitude)
            this.$set(this.form,'longitude','G'+this.form.longitude)
            this.form.updateTime=this.$options.filters['dateFormat'](new Date())
            if(this.userType==5){
                this.form.userIds=this.userId
            }
            this.form.authorizeFlag=this.authorizeFlag?'1':'0'
            this.submitFlag=true
            let res = await this.API.addSite(this.form)
            this.submitFlag=false
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleAdd2',false)
            this.$emit('uploadPage',true)
        }
    }
};
</script>

<style  lang="less">
.map-tool{
    >span{
        display: inline-block;
        border: 1px solid #cacaca;
        background: #fff;
        color: #006fbb;
        .iconfont{
            display: inline-block;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 30px;
            text-align: center;
            line-height: 40px;
        }
        &:first-child{
            border-right: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        &:last-child{
            border-left: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        &.active{
            color: #fff;
            background: #006fbb;
            border-color: #006fbb;
        }
    }
}
.label-inline{
    padding: 6px;
    line-height: 30px;
}
.form{
    .label{
        position: relative;
        text-align: center;
        margin: 10px 0;
        font-size: 14px;
        span{
            position: relative;
            padding: 0 10px;
            background: #fff;
        }
        &::before{
            content: '';
            position: absolute;
            height: 1px;
            background: #dadada;
            top: 50%;
            left: 12px;
            right: 12px;
        }
    }
}
</style>
